<script setup name="name">
import * as echarts from 'echarts'
import { markRaw } from 'vue'
const props = defineProps({
  xAxisData: {
    type: Array,
    default: []
  },
  yAxisData: {
    type: Array,
    default: []
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400px'
  },
  position: {
    type: String,
    default: 'top'
  },

  stack: {
    type: Boolean,
    default: false
  },
  tooltipShow: {
    type: Boolean,
    default: true
  },
  legendShow: {
    type: Boolean,
    default: true
  }
})
// 线边仓实例
const lineEdgeRef = ref(null)

const myChart = ref()
const option = {
  legend: {
    // 图例
    right: '1%',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    show: true,
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
    //图例提示框，默认不显示
  },

  // echarts固定高度
  grid: {
    width: '100%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['上月', '本月']
  },
  yAxis: { type: 'value' },
  series: [
    // {
    //   label: {
    //     position: props.position,
    //     // 运行时间层叠的数量
    //     show: true
    //   },
    //   emphasis: {
    //     focus: 'series'
    //   },
    //   name: '',
    //   type: 'bar',
    //   data: []
    // }
  ]
}
let tiemr = null
const initData = async () => {
  clearInterval(tiemr)
  option.series = []
  for (var i = 0; i < props.yAxisData.length; i++) {
    const item = props.yAxisData[i]
    option.series.push({
      label: {
        // 运行时间层叠的数量
        position: props.position,
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      name: item.materialType || item.classes,
      type: 'bar',
      data: [Number(item.lastMonthWeight), Number(item.monthWeight)]
    })
  }
  // option.series[0].data = props.yAxisData[0]
  // option.series[1].data = props.yAxisData[1]
  // 初始化echart

  const chartRefWrap = unref(lineEdgeRef)
  if (chartRefWrap) {
    myChart.value = markRaw(echarts.init(chartRefWrap))

    myChart.value.setOption(option)

    window.addEventListener('resize', chartsResize)
    //自动切换顺序
    var cityIndex = 0
    if (props.xAxisData.length < 2) return
    tiemr = setInterval(function () {
      if (cityIndex < props.xAxisData.length) {
        init(cityIndex)
        cityIndex++
      } else {
        cityIndex = 0
        init(cityIndex)
        cityIndex++
      }
    }, 2000)
  }
}

// 动态
const init = cityIndex => {
  // myChart.value.dispatchAction({ type: 'downplay', seriesIndex: 0 })
  // myChart.value.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: cityIndex })
  // myChart.value.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: cityIndex })
  // // myChart.value.dispatchAction({ type: 'legendScroll', seriesIndex: 0, dataIndex: cityIndex })
  myChart.value.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: cityIndex
  })
  // 高亮当前图形
  myChart.value.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: cityIndex
  })
  // 显示 tooltip
  myChart.value.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: cityIndex
  })
}

const chartsResize = () => {
  myChart.value && myChart.value.resize()
}

watch(
  () => props.yAxisData,
  val => {
    initData()
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <div ref="lineEdgeRef" :style="{ width: props.width, height: props.height }"></div>
</template>

<style lang="scss" scoped>
.ss {
  background-color: red;
}
</style>
